<script lang="ts" setup>
import {defineComponent, ref,computed} from 'vue';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DownOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue';
import logo from '@/assets/logo.png'
import {useRouter} from 'vue-router'
import {useProjectStore} from '@/stores/projectStore.ts'

const isCollapsed = ref(false);

interface MenuItem {
  key: string;
  title: string;
  icon: string;
};
const projectStore = useProjectStore();
const router = useRouter();
const routers = useRouter().getRoutes();
const items = routers.filter(e => e.meta.isMenu).sort((a, b) => {
  const order = ((a.meta.order as number) ?? 0) - ((b.meta.order as number) ?? 0);
  return order;
}).map(e => {
  return {
    key: e.name as string,
    title: e.meta.title as string,
    icon: e.meta.icon as string
  }
});
const menuItems = ref<MenuItem[]>(items);

const activeMenuItem = ref<MenuItem | null>(menuItems.value[0]);

const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value;
};

const handleMenuClick = (menuItem: MenuItem) => {
  activeMenuItem.value = menuItem;
  router.push({name: menuItem.key, params: {projectId: projectStore.projectId}})
};

function onProjectChanged() {
  if (projectStore.projectId) {
    router.push({name: 'languages', params: {projectId: projectStore.projectId}})
  }
}

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  },
});

const username = ref("BILLIE.L");

</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 h-16 bg-white shadow-sm z-50">
      <div class="flex items-center justify-between px-4 h-full">
        <!-- 左侧系统名称和折叠按钮 -->
        <div class="flex items-center gap-4">
          <button @click="toggleSidebar" class="!rounded-button p-2 hover:bg-gray-100"
                  v-if="projectStore.projectId">
            <MenuFoldOutlined v-if="isCollapsed" class="text-xl"/>
            <MenuUnfoldOutlined v-else class="text-xl"/>
          </button>
          <a-image class="text-[#757575]" :src="logo" :preview="false" width="28px"></a-image>
          <div class="divider"></div>
          <h1 class="text-xl font-semibold">
            <slot name="system-name"></slot>
          </h1>
          <a-select v-model:value="projectStore.projectId" class="ml-4 w-44"
                    @change="onProjectChanged"
                    show-search placeholder="选择一个项目"
                    :options="projectStore.projects.map(e =>({value:e.projectId,label:e.projectName}))">
            <template #dropdownRender="{ menuNode: menu }">
              <v-nodes :vnodes="menu"/>
              <a-divider style="margin: 4px 0"/>
              <a-button type="primary" class="w-full">+</a-button>
            </template>
          </a-select>
        </div>

        <div class="flex items-center gap-6">

          <!-- 用户信息 -->
          <a-dropdown>
            <button class="!rounded-button flex items-center gap-2 px-3 py-2 hover:bg-gray-100">
              <span class="whitespace-nowrap">{{ username }}</span>
              <DownOutlined/>
            </button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="3">
                  <LogoutOutlined/>
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </header>

    <!-- 侧边栏 -->
    <aside
      :class="['fixed left-0 top-16 bottom-0 bg-white shadow-sm transition-all', isCollapsed ? 'w-16' : 'w-48']"
      v-if="projectStore.projectId">
      <div class="h-full overflow-y-auto">
        <div v-for="(menuItem, index) in menuItems" :key="index" class="py-1">
          <button
            @click="() => handleMenuClick(menuItem)"
            :class="[
              '!rounded-button w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition-colors',
              activeMenuItem?.key === menuItem.key ? 'bg-blue-50 text-blue-600' : ''
            ]"
          >
            <a-image :src="menuItem.icon" :preview="false" width="24px"></a-image>
            <span v-show="!isCollapsed" class="whitespace-nowrap">{{ menuItem.title }}</span>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主要内容区域 -->
    <main :class="['pt-16 transition-all', isCollapsed ? 'ml-20' : 'ml-64']">
      <slot></slot>
    </main>
  </div>
</template>


<style scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.divider {
  width: 1px;
  height: 30px;
  background-color: #d9d9d9; /* 分割线颜色 */
}
</style>

